/**
 * 嵌套路由不要在路由上设置 exact 属性
 *
 * 路由传参
 *
 *    一、search 传参
 *      1. 传递
 *        <Link to="/detail?id=1&name=zs" />
 *        <Link to={{
 *            pathname: '/detail',
 *            search: 'id=1&name=zs'
 *         }}/>
 *        history.push('/detail?id=1&name=zs')
 *        history.push({
 *          pathname: '/detail',
 *          search: 'id=1&name=zs'
 *        })
 *      2. 获取
 *        通过 location.search 属性获取即可【需要自行处理分割】
 *        1. 自定义一个函数
 *        2. new URLSearchParams('')
 *
 *          作用：将一个查询字符串转换成一个 SearchParams 对象（Map）
 *
 *          语法：const searchParams = new URLSearchParams('id=1&name=zs')
 *
 *              searchParams.get('id') // '1'
 *              searchParams.get('name') // 'zs'
 *
 *    二、params 传参
 *
 *      0. 需要在定义 Route 规则的时候，需要在 path 上通过 : 来占位
 *        <Route path="/detail/:id/:name" />
 *
 *      1. 传递
 *        <Link to="/detail/100/zs" />
 *        <Link to={{
 *           pathname: '/detail/200/ls'
 *        }} />
 *        history.push('/detail/300/ww')
 *
 *      2. 取值
 *        1. 通过 match.params 获取，是一个对象
 *        2. 使用 useParmas()
 *
 *
 *    三、state 传参
 *
 *      1. 传递
 *        <Link to={{
 *            pathname: '/hello',
 *            state: {
 *               id: 1,
 *               name: 'zs'
 *            }
 *        }} />
 *
 *        history.push({
 *          pathname: '/hello',
 *           state: {
 *               id: 1,
 *               name: 'zs'
 *           }
 *        })
 *
 *      2. 取值
 *        通过 location.state 属性获取
 *        PS: 由于 state 传参不会再 URL 地址上有所表现，所以当页面刷新的话将丢失 state 的数据
 */

import { Component } from "react";
import { Route, Link, Switch, Redirect } from "react-router-dom";

import DetailOne from "./views/DetailOne";
import World from "./views/World";

export default class App extends Component {
  render() {
    return (
      <div>
        <h1>App</h1>
        <hr />
        <div className="container">
          <div className="left">
            <Link to="/detail?id=1&name=zs">DetailOne</Link> <br />
            <Link to="/info/100/zs">Info</Link> <br />
            <Link to={{ pathname: "/hello", state: { id: 1, name: "zs" } }}>
              Hello
            </Link>
          </div>
          <div className="right">
            <Switch>
              <Route path="/detail" component={DetailOne} />

              <Route
                path="/info/:id/:name"
                render={({ match }) => {
                  console.log("match", match);
                  const { params } = match;
                  return (
                    <div>
                      <h2>Info</h2>
                      <p>Id: {params.id}</p>
                      <p>Name: {params.name}</p>
                    </div>
                  );
                }}
              />

              <Route
                path="/hello"
                render={({ location }) => {
                  // location.state
                  console.log("location.state", location.state);

                  const state = location.state;
                  return (
                    <div>
                      <h2>Hello</h2>
                      <p>Id: {state?.id}</p>
                      <p>Name: {state?.name}</p>
                    </div>
                  );
                }}
              />

              <Route path="/world/:id/:name" component={World} />
            </Switch>
          </div>
        </div>
      </div>
    );
  }
}
